<nz-spin nzTip="Loading..." [nzSpinning]="submitting">
  <div *ngIf="isPermission" class="mt-4">
    <button
      *ngIf="!isSelfDevelop"
      nz-button
      nzType="primary"
      (click)="handleSubmit()"
      [nzLoading]="submitting"
      style="margin-right: 20px"
    >
      {{ $t('_save') }}
    </button>

    <button nz-button (click)="getUserCollect()" [nzLoading]="submitting">
      {{ $t('_refresh') }}
    </button>

    <button
      nz-button
      nzType="primary"
      nzDanger
      (click)="batchDelete()"
      [nzLoading]="submitting"
      style="margin-left: 20px"
    >
      {{ $t('_del') }}
    </button>

    <div class="mt-2.5 !text-red-500 font-bold" *ngIf="!isSelfDevelop">
      处理完成所有数据后需要点击一次保存方可生效
    </div>
    <nz-table
      class="mt-2.5"
      #basicTable
      [nzData]="dataList"
      [nzShowPagination]="false"
    >
      <thead>
        <tr>
          <th
            class="min-w-[100px]"
            [nzChecked]="checked"
            (nzCheckedChange)="onAllChecked($event)"
          ></th>
          <th class="min-w-[80px]">{{ $t('_action') }}</th>
          <th class="min-w-[80px]">{{ $t('_type') }}</th>
          <th class="min-w-[80px]">ID</th>
          <th class="min-w-[80px]">{{ $t('_icon') }}</th>
          <th class="min-w-[100px]">{{ $t('_webName') }}</th>
          <th class="min-w-[100px]">{{ $t('_associatedLabels') }}</th>
          <th class="min-w-[300px]">{{ $t('_webDesc') }}</th>
          <th class="min-w-[300px]">{{ $t('_webTag') }}</th>
          <th class="min-w-[200px]">{{ $t('_createAt') }}</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of dataList; index as idx; trackBy: trackByItem">
          <td
            [nzChecked]="setOfCheckedId.has(data.extra.uuid)"
            (nzCheckedChange)="onItemChecked(data.extra.uuid, $event)"
          ></td>
          <td>
            <a (click)="handleClick(data, idx)">{{ $t('_handle') }}</a>
          </td>
          <td>{{ typeMap[data.extra.type] }}</td>
          <td>{{ data.id }}</td>
          <td class="text-center">
            <ng-content *ngIf="data.oldData">
              <app-logo [src]="data.oldData.icon" [name]="data.oldData.name" />
              <div>↓</div>
            </ng-content>
            <app-logo [src]="data.icon" [name]="data.name" />
          </td>
          <td>
            <ng-content *ngIf="data.oldData">
              <a (click)="jumpService.goUrl($event, data.oldData.url)">{{
                data.oldData.name
              }}</a>
              <div>↓</div>
            </ng-content>
            <a
              (click)="jumpService.goUrl($event, data.url)"
              [innerHTML]="data.name"
            ></a>
          </td>
          <td>
            <ng-content *ngIf="data.oldData">
              <tag-list [data]="data.oldData.tags" *ngIf="data.oldData.tags" />
              <div>↓</div>
            </ng-content>
            <tag-list [data]="data.tags" *ngIf="data.tags" />
          </td>
          <td>
            <ng-content *ngIf="data.oldData">
              <pre class="desc">{{ data.oldData.desc }}</pre>
              <div>↓</div>
            </ng-content>
            <pre class="desc" [innerHTML]="data.desc"></pre>
          </td>
          <td>
            {{ data.breadcrumb }}
          </td>
          <td>{{ data.createdAt }}</td>
        </tr>
      </tbody>
    </nz-table>
  </div>
</nz-spin>
